<template>
  <div
    id="chart"
    ref="chartRef"
    :style="{ width: '480px', height: '145px' }"
  ></div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

// 监听 ScalablePage 缩放的 scale 变化
const props = defineProps({
    scale: {
        type: Number,
        default: 1,
    },

    /**
     yCoordinate是横坐标点位的数据，
     xCoordinate是纵坐标点位的数据，他们一一对应的，例如miaohui
     * 
     */

    yCoordinate: {
        type: Array,
        default: ['1172.5', '1174.5', '1176.5', '1178.5', '1180.5', '1182.5'],
    },
    xCoordinate: {
        type: Array,
        default: ['26.5', '125.5', '235.5', '329.5', '430.5', '531.5'],
    },
});

// 初始化 Echarts 图表
// const initChart = () => {
//     if (!chartRef.value) return;

//     // 重新初始化 chart，处理高 DPI
//     chartInstance = echarts.init(chartRef.value, null, {
//         devicePixelRatio: window.devicePixelRatio * props.scale || 1,
//     });

//     const option = {
//         tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//                 type: 'line',
//             },
//         },
//         legend: {
//             textStyle: {
//                 color: '#ccc',
//                 fontSize: '8px',
//             },
//             itemWidth: 8, // 控制圆点宽度
//             itemHeight: 8, // 控制圆点高度
//             icon: 'circle', // 确保圆点为实心圆
//         },
//         grid: {
//             left: '0%',
//             top: 30,
//             right: '3%',
//             bottom: '0%',
//             containLabel: true,
//         },
//         xAxis: {
//             type: 'category',
//             boundaryGap: false, // 让折线贴合 x 轴
//             data: [
//                 '0',
//                 '100',
//                 '200',
//                 '300',
//                 '400',
//                 '500',
//                 '600',
//                 '700',
//                 '800',
//             ],
//             axisLabel: {
//                 color: '#fff',
//                 fontSize: '8px',
//             },
//         },
//         yAxis: {
//             type: 'category',
//             axisLabel: {
//                 color: '#fff',
//                 fontSize: '8px',
//             },
//             boundaryGap: false, // 让折线贴合 x 轴
//             data: [
//                 '1166',
//                 '1168',
//                 '1170',
//                 '1172',
//                 '1174',
//                 '1176',
//                 '1178',
//                 '1180',
//                 '1182',
//                 '1184',
//             ],
//             splitLine: {
//                 lineStyle: {
//                     type: 'dashed', // 修改背景线为虚线
//                     color: '#444', // 线条颜色
//                     width: 0.3,
//                     dashOffset: 5, // 控制虚线间距
//                 },
//             },
//         },
//         series: [
//             {
//                 type: 'line',
//                 smooth: true, // 取消平滑，变为直线
//                 itemStyle: {
//                     color: '#ff9300',
//                 },
//                 areaStyle: {
//                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//                         { offset: 0, color: 'rgba(255,147,0,0.5)' },
//                         { offset: 0.6, color: 'rgba(255,147,0,0.1)' },
//                         { offset: 1, color: 'rgba(255,147,0,0)' },

//                     ]),
//                 },
//                 symbol: 'circle', // 设置为实心圆
//                 symbolSize: 7, // 圆点大小
//                 lineStyle: {
//                     width: 0.5, // 线条宽度
//                 },
//             },
//         ],
//     };

//     chartInstance.setOption(option);
// };

const initChart = () => {
    if (!chartRef.value) return;

    chartInstance = echarts.init(chartRef.value, null, {
        devicePixelRatio: window.devicePixelRatio * props.scale || 1,
    });

    // 横纵轴固定值（分类轴）
    const xAxisData = [
        '0',
        '100',
        '200',
        '300',
        '400',
        '500',
        '600',
        '700',
        '800',
    ];
    const yAxisData = [
        '1166',
        '1168',
        '1170',
        '1172',
        '1174',
        '1176',
        '1178',
        '1180',
        '1182',
        '1184',
    ];

    // 生成 series.data：找出每个点在 xAxis/yAxis 中的索引
    const seriesData = props.xCoordinate.map((x, index) => {
        const xIndex = xAxisData.indexOf(x);
        const yIndex = yAxisData.indexOf(props.yCoordinate[index]);
        if (xIndex === -1 || yIndex === -1) return null;
        return [x, props.yCoordinate[index]]; // 保持格式为 [x, y]，分类轴能识别
    }).filter(Boolean);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
            },
        },
        legend: {
            textStyle: {
                color: '#ccc',
                fontSize: '8px',
            },
            itemWidth: 8,
            itemHeight: 8,
            icon: 'circle',
        },
        grid: {
            left: '0%',
            top: 30,
            right: '3%',
            bottom: '0%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisData,
            axisLabel: {
                color: '#fff',
                fontSize: '8px',
            },
        },
        yAxis: {
            type: 'category',
            axisLabel: {
                color: '#fff',
                fontSize: '8px',
            },
            boundaryGap: false,
            data: yAxisData,
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#444',
                    width: 0.3,
                    dashOffset: 5,
                },
            },
        },
        series: [
            {
                type: 'line',
                smooth: true,
                itemStyle: {
                    color: '#ff9300',
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(255,147,0,0.5)' },
                        { offset: 0.6, color: 'rgba(255,147,0,0.1)' },
                        { offset: 1, color: 'rgba(255,147,0,0)' },
                    ]),
                },
                symbol: 'circle',
                symbolSize: 7,
                lineStyle: {
                    width: 0.5,
                },
                data: seriesData,
            },
        ],
    };

    chartInstance.setOption(option);
};

// 监听 ScalablePage 的缩放比例变化
watch(
    () => props.scale,
    (newScale) => {
        if (chartInstance) {
            nextTick(() => {
                chartInstance.dispose();
                initChart();
            });
        }
    }
);

onMounted(async () => {
    await initChart();
    window.addEventListener('resize', resizeChart);
});

// 窗口变化时重新 resize
const resizeChart = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};
</script>

<style scoped>
#chart {
  width: 480px;
  height: 145px;
}
</style>